
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>使用 animate.css 制作流畅交互动效</title>
        <link rel="stylesheet" href="animate.css">
        <style type="text/css">
            html {
                font-size: 62.5%;
                font-family: 'Open Sans', 'Helvetica Neue', Arial, 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
            }
            body {
                font-size: 1.8em;
                line-height: 3;
                background-color: #eeeeee;
            }
            h3 {
                font-size: 1.8em;
                margin-bottom: 3rem;
                line-height: 1.5;
                font-weight: 800;
            }
            p {
                margin-bottom: 1.5rem;
            }
            .site-container {
                max-width: 320px;
                margin: 10px auto;
                padding-left: 0.6em;
                padding-right: 0.6em;
                padding-top: 3%;
                padding-bottom: 3%;
            }
            @media screen and (min-width: 60.063em) {
                .site-container {
                    max-width: 400px;
                }
            }
            .card {
                position: relative;
                overflow: hidden;
                background-color: white;
                box-shadow: 0 1px 3px 0 rgba(0,0,0,0.24), 0 1px 18px 0 rgba(0,0,0,0.12);
                border-radius: 2px;
                padding: 1em 1.5em;
            }
            .form__wrapper {
                overflow: hidden;
                position: relative;
                z-index: 1;
                display: inline-block;
                margin-bottom: 1.6rem;
                width: 100%;
                vertical-align: top;
            }
            .form__wrapper__submit {
                padding: 1.6rem 0;
            }
            .form__input {
                display: block;
                position: relative;
                margin-top: 1em;
                padding: 0.84em 0;
                width: 100%;
                box-sizing: border-box;
                color: #444;
                font-size: 1.6rem;
                outline: 0;
                border: none;
                border-bottom: solid 1px #ddd;
            }
            .form__input:focus {
                background-position: 0 0;
                color: #444;
                
            }
            .form__label {
                position: absolute;
                bottom: 0;
                left: 0;
                padding: 0;
                width: 0;
                height: calc(99%);
                text-align: left;
                pointer-events: none;
                color: #999;

                box-sizing: border-box;
                transition:width .3s;
            }

            .form__label__content {
                position: absolute;
                transition: .3s ease-out;
            }
            .form__input:focus ~.form__label .form__label__content,
            .form--filled .form__label-content {
                top: -10px;
                font-size: .9em;
            }
            .btn {
                width: 100%;
                display: inline-block;
                padding: 0.7em 1.5em;
                border-radius: 2px;
                background-color: #2196f3;
                color: #fff;
                border: 0;
                outline: none;
                cursor: pointer;
                font-family: inherit;
                font-weight: 400;
                font-size: 1.6rem;
                box-shadow: 0 1px 3px 0 rgba(3,30,51,0.24), 0 1px 2px 0 rgba(3,30,51,0.12);
                transition: all 0.2s ease;
            }
            .btn:focus,
            .btn:hover {
                background-color: #0d8aee;
            }
        </style>
    </head>
    <body>
        <section class="site-container">
            <section class="card">
                <h3>Login</h3>
                <form>
                    <div class="form__wrapper" data-wow-delay="0.5s">
                        <input type="email" class="form__input" id="email" name="email">
                        <label class="form__label" for="email">
                        <span class="form__label__content">Email</span>
                        </label>
                    </div>
                    <div class="form__wrapper" data-wow-delay="0.6s">
                        <input type="password" class="form__input" id="password" name="password">
                        <label class="form__label" for="password">
                        <span class="form__label__content">Password</span>
                        </label>
                    </div>
                    <div class="form__wrapper__submit pulse infinite" data-wow-delay="0.7s">
                        <div class="form__input__submit">
                            <button type="submit" name="submit" class="btn">Submit</button>
                        </div>
                    </div>
                </form>
            </section>
        </section>
    </body>
    <script src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/jquery/jquery-1.10.2.min_65682a2.js"></script>
    <script>
    var inp =$(".form__input");
        inp.focus(function(){
            $(this).siblings(".form__label").css({"width":"100%","border-bottom":"solid 2px #1e8bf0"});
            $(this).siblings(".form__label").children(".form__label__content").css({"top":"-10px","font-size":".9em"});
        });
        inp.blur(function(){
            $(".form__label").css({"width":"0"});
            if($(this).val()){
                //非空时label维持上移
                $(this).siblings(".form__label").children(".form__label__content").css({"top":"-10px","font-size":".9em"});
            }else{
                //空时label恢复原样
                $(this).siblings(".form__label").children(".form__label__content").css({"top":"0","font-size":"1em"});
            }
            if($('#email').val()!=="" && $('#password').val()!==""){
                $(".btn").addClass("animated infinite pulse");
            }
        })

    </script>
</html>